

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'
import microApp, { removeDomScope } from '@micro-zoe/micro-app'

import React, { useState, useEffect, useRef } from 'react';
import { Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import Cookies from 'js-cookie' // 引入路由组件
import { storage } from '@/utils/storage' // 引入路由组件
import YzhEmpty from '@com/YzhEmpty'
import { apps } from '@/micro-app'
import { antConfig } from '@/config'
const { loadingConfig } = antConfig

import { useCustomState } from '@/hooks/useEffect';
const antIcon = <LoadingOutlined style={{ fontSize: 30 }} spin />
const microApps = (props) => {
    const [hasError, setError] = useCustomState(false)
    const [loading, setLoading] = useState(true)
    const microRef = useRef(null)
    const [activeApp, setActiveApp] = useState(apps.product)
    const lifeCycles = {
        onCreated () {
            console.log('micro-app元素被创建')
            setLoading(false)
        },
        onBeforemount () {
            console.log('即将被渲染')
        },
        onMounted () {
            console.log('已经渲染完成')
            // let appDom = document.querySelector('.micro-app')
            const { primaryColor } = props.themeConfig.theme
            console.log(microRef, 'appDom')
            microRef.current.style.setProperty('--color-primary', primaryColor)
            setLoading(false)
        },
        onUnmount (e) {
            console.log('被卸载', e)
            setLoading(false)
            setError(true)
        },
        onError () {
            console.log('渲染出错')
            setLoading(false)
            setError(true)
        }
    }
    const userInfo = storage.get('userInfo')
    const { location } = props
    // console.log(activeApp, 'activeApp');
    function pushState (path) {
        props.history.push(path)
    }
    useEffect(() => {
        const getActiveApp = () => {
            setError(false)
            setLoading(true)
            // 重置作用域
            removeDomScope()
            for (const key in apps) {
                if (apps[key] && location.pathname.includes(key)) {
                    setActiveApp(apps[key])
                    // 👇 基座向子应用下发一个名为pushState的方法
                    const { defaults, ...themeConfig } = props.themeConfig
                    microApp.setData(key, {
                        pushState,
                        userId: userInfo.userId,
                        token: encodeURI(Cookies.get('token')),
                        themeConfig,
                    })
                }
            }
        }
        getActiveApp()
    }, [activeApp, hasError])
    return (
        <div className="yzh-micro-app">
            {
                /* // name(必传)：应用名称，每个`name`都对应一个应用，必须以字母开头，且不可以带有 `.`、`#` 等特殊符号
                    // url(必传)：页面html的地址
                    // baseroute(可选)：基座应用分配给子应用的路由前缀，就是上面的my-page
                */
            }
            {
                loading && <Spin id="yzh-loading" style={{ zIndex: 10 }} tip={loadingConfig.tip} indicator={antIcon} />
            }
            {<micro-app
                ref={microRef}
                {...lifeCycles}
                class={'micro-app'}
                {...activeApp}
                macro
            ></micro-app>}
            {hasError && <YzhEmpty height={200} style={{ padding: '200px 0' }} />}
        </div>
    )
}
function arePropsEqual (prevProps, nextProps) {
    const prevPath = prevProps.location.pathname
    const nextPath = nextProps.location.pathname
    const prevScroll = prevProps.scroll || {}
    const nextprevScroll = nextProps.scroll || {}
    if (prevPath === nextPath) {
        if (prevScroll.y !== nextprevScroll.y) {
            return false
        }
        return true
    }
    let _prev = JSON.stringify(prevProps)
    let _next = JSON.stringify(nextProps)
    return _prev === _next
    // return false
}
export default React.memo(microApps, arePropsEqual)
